﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="https://mudblazor.com/_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/zoomist@2/zoomist.css" rel="stylesheet" />
    <link rel="icon" type="image/ico" href="favicon.ico" />
    <HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
    <script src="https://mudblazor.com/_content/MudBlazor/MudBlazor.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/zoomist@2/zoomist.umd.js"></script>
    <script>
        window.initializeZoomist = function () {
            const zoomist = new Zoomist("#zoomist", {
                slider: true,
                zoomer: true,
            });
        };
    </script>
    <script type="module">
        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';

        window.redrawMermaidDiagram = async (content) => {
            const drawDiagram = async function () {
                let element = document.querySelector('.mermaid');
                const graphDefinition = content;
                const { svg } = await mermaid.render('graphDiv', graphDefinition);
                element.innerHTML = svg;
            };

            await drawDiagram();
        };
        // this doesn't work
        @* window.rerenderMermaidDiagram = async () => {
            let element = document.querySelector('.mermaid:not(:has(svg))');

            if (!element) {
                return;
            }

            let graphDefinition = element.innerHTML;
            graphDefinition = graphDefinition.replace(/&gt;/g, '>').replace(/&lt;/g, '<');

            const { svg } = await mermaid.render('graphDiv', graphDefinition);
            element.innerHTML = svg;
        }; *@
    </script>
    <script>
        window.ScrollToBottom = (elementName) => {
            element = document.getElementById(elementName);
            element.scrollTop = element.scrollHeight - element.clientHeight;
        }
    </script>
</body>

</html>
